<template>
  <div class="min-h serveProject bg-wt">
    <!-- 搜索框 -->
    <SearchForm :searchData="pagination" @handle-clear="handleClear" @handle-reset="handleReset"
      @handle-search="handleSearch"></SearchForm>
    <!-- 表格数据 -->
    <TableList :data="data" :pagination="pagination" :title="title" @on-change="onChange" @handle-build="handleBuild"
      @handle-edit="handleEdit" @handle-click-delete="handleClickDelete" @handle-forbidden="handleForbidden">
    </TableList>

    <!-- 新增或者编辑对话框 -->
    <DialogForm :visible="visible" ref="formRef" :title="title" :data="formData" @handle-close="handleClose"
      @handle-add="handleAdd" @handleEdit="editProject">
    </DialogForm>

    <!-- 删除弹窗 -->
    <DeleteForm :visible="dialogDeleteVisible" :delete-text="operateText" @handle-delete="handleDelete"
      @handle-close="handleDeleteClose"></DeleteForm>

    <!-- 禁用弹窗 -->
    <ForbiddenForm :visible="dialogVisible" :text="operateText" @handle-submit="handleForbiddenSub"
      @handle-close="handleForbiddenClose"></ForbiddenForm>

  </div>

</template>

<script lang="tsx" setup>
import { onMounted, ref } from 'vue';
/* 分页组件相关 */
import { MessagePlugin, PaginationProps } from 'tdesign-vue-next';
import { getProjectDetails, getProjectList, projectAdd, projectDelete, projectStatus, projectUpdate } from '@/api/serve';
import TableList from '@/pages/serve/plan/project/components/TableList.vue';
import SearchForm from '@/pages/serve/plan/project/components/SearchForm.vue';
import DialogForm from '@/pages/serve/plan/project/components/DialogForm.vue';
// 删除弹窗
import DeleteForm from '@/components/OperateDialog/index.vue'
//禁用弹窗
import ForbiddenForm from '@/components/Forbidden/index.vue';
import { RefSymbol } from '@vue/reactivity';
import { compileStyle } from '@vue/compiler-sfc';

/* 表格的列表数据 */
const data = ref([]);

/* 表单数据变量 */
const formData = ref({});

//是否显示弹窗
const visible = ref(false);

// 绑定子组件弹窗标题
const title = ref('');

const dialogDeleteVisible = ref(false) // 控制删除弹层显示隐藏
const dialogVisible = ref(false) // 禁用弹窗
const typeId = ref('') // 设置删除id
const typeStatus = ref(null) // 禁用启用
const operateText = ref('护理项目') // 要操作的内容提示
const statusText = ref('') // 启用禁用提示

const formRef = ref(null);


//分页对象
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  name: '',
  status: ''
});

// 当前页和页码发生变化时触发的函数
const onChange: PaginationProps['onChange'] = (pageInfo) => {
  pagination.value.pageNum = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  searchProject();
};



/* 条件搜索护理项目 */
const searchProject = async () => {
  let result: any = await getProjectList(pagination.value);
  pagination.value.total = result.data.total;//总条数
  data.value = result.data.records;
};

//重置搜索框
const handleReset = () => {
  //重置页码
  pagination.value = {
    pageNum: 1,
    pageSize: 10,
    total: 0,
    name: '',
    status: ''
  }
  searchProject();
}

//搜索
const handleSearch = () => {
  //点击了搜索按钮之后，就需要重置页码
  pagination.value.pageNum = 1;
  searchProject();
}

//清空搜索项
const handleClear = (val) => {
  if (val === 'name') {
    delete pagination.value.name;
  } else {
    delete pagination.value.status;
  }
  searchProject();
}
const handleBuild = () => {
  title.value = '新增';
  visible.value = true;
}




// 禁用弹窗
const handleForbidden = (val) => {
  typeId.value = val.id
  if (val.status === 1) {
    dialogVisible.value = true
    typeStatus.value = 0
    statusText.value = '禁用成功'
  } else {
    typeStatus.value = 1
    handleForbiddenSub();
    statusText.value = '启用成功'
  }
}
// 确定禁用
const handleForbiddenSub = async () => {
  const params = {
    id: typeId.value,
    status: typeStatus.value
  }
  const res = await projectStatus(params)
  if (res.code === 200) {
    dialogVisible.value = false
    MessagePlugin.success(statusText.value);
    searchProject();
  }
}
// 关闭禁用弹窗
const handleForbiddenClose = () => {
  dialogVisible.value = false
}


const handleClose = () => {
  visible.value = false;
}

//打开删除弹窗
const handleClickDelete = (val) => {
  typeId.value = val.id
  dialogDeleteVisible.value = true
}

// 确认删除
const handleDelete = async () => {
  const res = await projectDelete(typeId.value)
  if (res.code === 200) {
    dialogDeleteVisible.value = false;
    MessagePlugin.success('删除成功');
    if (pagination.value.pageNum > 1 && data.value.length === 1) {
      pagination.value.pageNum -= 1;
    }
    searchProject();
  }
}

// 关闭删除弹窗
const handleDeleteClose = () => {
  dialogDeleteVisible.value = false
}

// 添加
const handleAdd = async (val) => {
  /* 请求后端 */
  let result: any = await projectAdd(val)
  if (result.code === 200) {
    MessagePlugin.success('添加成功');
    // 关闭窗口
    handleClose();
    //重新查询
    searchProject();
    //表单数据置空
    formRef.value.handleClear();
  } else {
    MessagePlugin.error(result.msg);
  }
}

const handleEdit = async (id) => {
  //请求后端
  let result: any = await getProjectDetails(id);
  if (result.code === 200) {
    //父传子 给表单数据赋值
    formData.value = result.data;
    //显示弹框
    title.value = '编辑';
    visible.value = true;
  }
}

const editProject = async (project) => {
  /* 请求后端 */
  let result: any = await projectUpdate(project);
  if (result.code === 200) {
    MessagePlugin.success('修改成功');
    // 关闭窗口
    handleClose();
    //重新查询
    searchProject();
    //表单数据置空
    formRef.value.handleClear();
  } else {
    MessagePlugin.error(result.msg);
  }
}

/* 钩子函数 */
onMounted(() => {
  searchProject();
});
</script>
